<template>
  <div>
    <h1>当前鼠标的位置</h1>
    <p>x:{{ x }}</p>
    <p>y:{{ y }} </p>

    <hr />
    <p>当前点击次数:{{ num }}</p>
    <button @click="add">点击+1</button>    
  </div>
</template>

<script>
  export default {
    data(){
      return {
        x:106,
        y:178,
        num:2
      }
    },
    created(){
      window.addEventListener('mousemove',this.move)
    },
    methods:{
      move(e){
        this.x = e.pageX
        this.y = e.pageY
      },
      add(){
        this.num += 1
      }
    },
    destroyed(){
        window.removeEventListener('mousemove',this.move)
    }
  }
</script>